<template>
    <!--个人地址新增-->
    <div class="contain">
        <a-form-model ref=form :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="发票类型" prop="fapiao_type">
                <a-radio-group v-model="form.fapiao_type">
                    <a-radio value="增值税电子普票">
                        增值税电子普票
                    </a-radio>
                    <a-radio value="增值税专用发票">
                        增值税专用发票
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="抬头类型" prop="fapiao_taitou_type">
                <a-radio-group v-model="form.fapiao_taitou_type">
                    <a-radio value="企业">
                        企业
                    </a-radio>
                    <a-radio value="个人/非企业">
                        个人/非企业
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="发票抬头" prop="fapiao_taitou">
                <a-input v-model="form.fapiao_taitou"/>
            </a-form-model-item>
            <a-form-model-item label="纳税人识别号" prop="nashuiren" v-show="form.fapiao_taitou_type==='企业'">
                <a-input v-model="form.nashuiren"/>
            </a-form-model-item>
            <a-form-model-item label="开户行" v-show="form.fapiao_taitou_type==='企业'">
                <a-input v-model="form.kaihu_bank"/>
            </a-form-model-item>
            <a-form-model-item label="银行账号" v-show="form.fapiao_taitou_type==='企业'">
                <a-input v-model="form.bank_account"/>
            </a-form-model-item>
            <a-form-model-item label="单位地址" v-show="form.fapiao_taitou_type==='企业'">
                <a-input v-model="form.danwei_address"/>
            </a-form-model-item>
            <a-form-model-item label="接收邮箱" prop="fapiao_receive">
                <a-input v-model="form.fapiao_receive"/>
            </a-form-model-item>
            <a-form-model-item label="开票金额" prop="fapiao_fee">
                <a-input v-model="form.fapiao_fee" disabled/>
            </a-form-model-item>
            <a-form-model-item style="text-align: center;margin-left: 25%">
                <a-button type="primary" html-type="submit" @click="onSubmit">
                    保存
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
export default {
    name: 'ticketAdd',
    components: {
        /**/
    },
    data() {
        let that = this;
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form: {
                order_id: '',
                fapiao_type: null,
                fapiao_taitou: null,
                fapiao_taitou_type: null,
                fapiao_fee: null,
                fapiao_receive: null,
                nashuiren: null,
                kaihu_bank: null,
                bank_account: null,
                danwei_address: null
            },
            rules: {
                fapiao_taitou: [{ required: true, message: '请输入发票抬头', trigger: 'change' }],
                fapiao_receive: [{ required: true, message: '请输入发票接受邮箱地址', trigger: 'change' }],
                fapiao_taitou_type: [{ required: true, message: '请选择发票抬头类型', trigger: 'change' }],
                fapiao_type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
                nashuiren:[{ required: true, validator:()=> {
                    if(that.form.fapiao_taitou_type === '企业' &&!that.form.nashuiren) {
                        return new Error('请输入纳税人识别号')
                    }
                    return true;
                }}],
                fapiao_fee: [{ required: true, message: '请输入开票金额', trigger: 'change' }],
            }
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {
                return {
                }
            }
        }
    },
    watch: {
        order(val) {
            this.form = Object.assign({},{
                order_id: val.id,
                fapiao_fee: val
            })
        }
    },
    mounted() {
        let val = this.order;
        this.form =Object.assign({},{
            order_id: val.id,
            fapiao_fee: val.pay_fee
        })
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$api.ajaxData({
                        pathName: 'doApplyFaPiao',
                        authorization: true,
                        method: 'post',
                        data: Object.assign(this.form)
                    }).then(() =>{
                        this.$notification.open({
                            message: '信息提示',
                            description: '开票申请成功，请耐心等待结果'
                        });
                        this.$emit('submit');
                    });
                } else {
                    return false;
                }
            });
        },
    }
};
</script>
<style scoped lang="scss">
.contain {
    padding: 20px 0;
    background: #fff;
    .title {
        height: 50px;
        margin: 0 20px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }
    .content {
        padding: 40px 0 40px 20px;
        .address-box {
            li {
                position: relative;
                float: left;
                width: 33.33%;
                padding: 15px 10px;
                margin-right: 20px;
                height: 180px;
                font-size: 13px;
                color: #333333;
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                &.address {
                    .default-tag {
                        position: absolute;
                        top: 3px;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #FFFFFF;
                        background: #ff8080;
                    }
                    .form {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 20px;
                        .label {
                            flex-shrink: 0;
                            width: 70px;
                        }
                        .value {

                        }
                    }
                    .option {
                        .option-btn {
                            float: left;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 10px;
                            color: #999;
                            border: 1px solid #e4e4e4;
                            border-radius: 3px;
                            text-align: center;
                            cursor: pointer;
                        }
                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                }
                &.add-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px dashed #e4e4e4;
                    text-align: center;
                    cursor: pointer;
                    span {
                        font-size: 20px;
                        color: #666666;
                        line-height: 28px;
                    }
                }
            }

        }&:after {
             content: '';
             display: block;
             clear: both;
         }
    }
}
</style>
